<template>
	<div class="box">
		<div class="inpBox">
			<el-input class="inp" v-model="inpNum" :value="inpNum" @keyup.enter.native="search" placeholder="请输入班级编号"></el-input>
			<el-input class="inp" v-model="inpClass" :value="inpClass" @keyup.enter.native="search" placeholder="请输入班级名称"></el-input>
			<el-input class="inp" v-model="inpHead" :value="inpHead" @keyup.enter.native="search" placeholder="请输入负责人姓名"></el-input>
			<el-button class="btn" style="background: #106ab1; color: #fff;" icon="el-icon-search" @click="search">搜索</el-button>
			<el-button class="btn addbtn" type="primary" icon="el-icon-circle-plus-outline"  @click="addClass">添加</el-button>
		</div>
		<el-table class="tab" :data="classList">
			<el-table-column label="班级编号" prop="clazzNum"></el-table-column>
			<el-table-column label="班级名称" prop="clazzName"></el-table-column>
			<el-table-column label="负责人" prop="teaName"></el-table-column>
			<el-table-column label="上课教室" prop="clazzRoom"></el-table-column>
			<el-table-column label="班级人数" prop="num"></el-table-column>
			<el-table-column >
				<template slot-scope="scope">
                    <a href="#" style="color: #106ab1;" @click="detail(scope.row)">详情</a>
                </template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="sc">
					<a href="#" style="margin: 0 5px; color: green;" class="sp1" @click="changeClass(sc.row)">修改</a>
                    <a href="#" style="color: #ff0000;" @click="del(sc.row)">删除</a>
                </template>
			</el-table-column>
		</el-table>

		
			<el-pagination
				class="page"
				layout="prev, pager, next"
				:total="totalSize"
				:current-page="pageIndex"
				@current-change="changePage"
				:page-size="pageSize">
			</el-pagination>
		
		<el-dialog
			:title="title"
			:visible.sync="centerDialogVisible"
			width="30%"
			center>
			<ChangeAddClass @getClass="getClass" :classData="classData" :centerDialogVisible="centerDialogVisible"></ChangeAddClass>
		</el-dialog>
		<el-dialog
			class="dialog"
			:visible.sync="flag"
			width="30%"
			center>
			<b>确认删除该班级</b>
			<span slot="footer" class="dialog-footer">
				<el-button style="background: #106ab1; color: #fff;" @click="delClass">确 定</el-button>
				<el-button style="background: #999; color: #fff;" @click="flag = false">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import ChangeAddClass from '../components/ChangeAddClass.vue'
	export default{
		components:{
			ChangeAddClass
		},
		data(){
			return{
				baseUrl:require("../js/baseUrl.js").baseUrl,
				classList:[],
				pageIndex:1,//当前显示的页
				pageSize:5,//每页显示的条数
				totalSize:0,//总数
				inpClass:'',
				inpHead:'',
				inpNum:'',
				searchWord1:'',
				searchWord2:'',
				searchWord3:'',
				centerDialogVisible: false,
				flag:false,
				title:'请添加新班级',
				classData:'',
				classId:''
			}
		},
		methods:{
			//班级显示:SchoolSys/clazz/select
			getClass(){
				this.$http.post(this.baseUrl+'clazz/select',{
					pageIndex:this.pageIndex,
					pageSize:this.pageSize
				}).then(res=>{
					// console.log(res.data.data);
					if(res.data.code==200){
						this.classList=res.data.data.data
						this.totalSize=res.data.data.totalSize
						// console.log(this.totalSize);
						
					}
				})
				this.centerDialogVisible=false
			},
			//分页
			changePage(page){
				this.pageIndex=page;
				this.inpClass=this.searchWord1
				this.inpHead=this.searchWord2
				this.inpNum=this.searchWord3
            	
				if(this.searchWord1!=""){
					this.searchClass()
				}else if(this.searchWord2!=""){
					this.searchClass()
				}else if(this.searchWord3!=""){
					this.searchClass()
				}else{
					this.getClass()
				}
				
			},
			//搜索：SchoolSys/clazz/like
			searchClass(){
				this.$http.post(this.baseUrl+'SchoolSys/clazz/like',{
					clazzNum:this.searchWord3,
					clazzName:this.searchWord1,
					teaName:this.searchWord2,
					pageIndex:this.pageIndex,						
					pageSize:this.pageSize
				}).then(res=>{
					// console.log(res);
					if(res.data.code==200){
						this.classList=res.data.data.data
						this.totalSize=res.data.data.totalSize
					}else{
						this.classList=''
						this.totalSize=1
					}
				})
			},
			search(){
				this.pageIndex=1;
				if(this.inpClass==""){
					this.searchWord1=null
				}else{
					this.searchWord1=this.inpClass
				}
				if(this.inpHead==""){
					this.searchWord2=null
				}else{
					this.searchWord2=this.inpHead
				}
				if(this.inpNum==""){
					this.searchWord3=null
				}else{
					this.searchWord3=this.inpNum
				}
				
				this.searchClass()
        	},
			//班级添加
			addClass(){
				this.centerDialogVisible = true
				this.title='请添加新班级'
				this.classData=""
			},
			//班级修改
			changeClass(classData){
				// console.log(classData);
				this.classData=classData
				this.centerDialogVisible=true
				this.title='班级修改'
			},
			//班级删除:SchoolSys/clazz/delete
			del(classData){
				// console.log(classData);
				this.flag=true
				this.classId=classData.clazzId
			},
			delClass(){
				this.$http.post(this.baseUrl+'SchoolSys/clazz/delete',{
					clazzId:this.classId
				}).then(res=>{
					if(res.data.code==200){
						this.$message.success('该班级删除成功')
						this.pageIndex=1
						this.getClass()
					}else{
						this.$message.error('该班级删除失败')
					}
				})
				this.flag = false
			},
			//跳转班级详情
			detail(classDetails){
				// console.log(classDetails);
				this.$router.push('/classmanager/classdetails?clazzId='+classDetails.clazzId+'&clazzName='+classDetails.clazzName)
			}
		},
		mounted(){
			this.getClass()
		},
	}
</script>

<style lang="less">
	.box{
		a{
			text-decoration: none;
			color: #333;
		}
		padding: 40px;
		.inpBox{
			position: relative;
			.el-input{
				width: 200px;
				
			}
			.el-input__inner{
				width: 200px;
			}
			.inp{
				margin-right: 20px;
			}
			.btn{
				height: 40px;
			}
			
			i{
				margin-top: 0;
			}
		}
		.addbtn{
			position: absolute;
			right: 0;
		}
		.dialog{
            b{
                display: block;
                text-align: center;
            }
        }
		.el-table .cell{
			text-align: center;
		}
		.el-table{
			background: transparent;
			margin: 0 0;
		}
		.el-table::before {
			height: 0;
		}
		.el-table thead{
			color: #333;
		}
		.tab{
			margin-top: 40px;
			color: #333;
			.el-table__body{
				border-spacing: 0 8px;
			}
		}
		.el-table th.el-table__cell {
		   background:#f3f8fd ;
		}
		.page{
			text-align: center;
			margin-top: 30px;
		}
	}
</style>